import { useState, useRef, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import arrowBottom from '@/assets/icon/arrow_bottom.png';
import arrowTop from '@/assets/icon/arrow_top.png';
import iconDown from '@/assets/icon/download.png';
import Loading from '@/components/Loading';
import API from '@/http';

function SvgItem(props) {
  const contentRef = useRef(null);
  const [status, setStatus] = useState(false);
  return (
    <div
      onClick={() => setStatus(!status)}
      className="mt-[10px] flex cursor-pointer flex-col"
    >
      <div
        className={`flex bg-[#8b8c92] rounded-sm h-9 w-full flex-row items-center justify-between md:h-[100px] ${status ? 'rounded-b-[0px]' : 'rounded-b-[10px]'} mt-0 px-[20px] duration-300 ease-in`}
      >
        <span className="text-14 md:text-20 text-ff">{props.data.name}</span>
        <div  className="h-4 w-4 md:h-[30px] md:w-[30px] bg-[#66676f] rounded-full">
        <img
          src={status ? arrowTop : arrowBottom}
          alt=""
          className="h-4 w-4 md:h-[30px] md:w-[30px]"
        />
        </div>
        
      </div>
      <div
        className={`overflow-hidden transition-all ease-in-out ${status ? 'rounded-b-[10px]' : 'rounded-b-[0px]'}`}
        style={{
          height: status ? `${contentRef.current.clientHeight}px` : '0px',
        }}
      >
        <div
          ref={contentRef}
          className="flex flex-col bg-[#8b8c92] items-center justify-center overflow-hidden"
        >
          <img
            className="max-h-[100px] md:max-h-[179px]"
            src={props.data.image_url}
            alt=""
          />
          <div
            onClick={(e) => {
              e.stopPropagation();
              window.location.href = props.data.download_url;
            }}
            className="mb-[20px] text-ff bg-red mt-[25px] flex h-[37px] w-auto flex-row items-center justify-center rounded-full px-[20px] py-[11px] md:mb-[35px] md:mt-[50px]"
          >
            <img
              src={iconDown}
              alt=""
              className="mr-[5px] h-[12px] md:h-[15px] md:w-[17px]"
            />
            <span className="select-none text-[12px] md:text-[14px]">
              {props.data.name}
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Material() {
  const [type, setType] = useState('all');
  const [source, setSource] = useState(null);
  const { t } = useTranslation();
  const types = [
    {
      name: t('all'),
      key: 'all',
    },
    {
      name: 'Logo',
      key: 'logo',
    },
    {
      name: t('image'),
      key: 'image',
    },
  ];

  useEffect(() => {
    setSource(null);
    API.Material.sourcesList({ data: { type } }).then((res: any) => {
      console.log(res);
      setSource(res);
    });
    return () => {};
  }, [type]);
  return (
    <div className="mx-auto max-w-[1290px] p-5 pt-24">
      <div className='flex items-center justify-between'>
      <div className="flex flex-col items-center space-y-12">
        <h1 className="text-center text-ff text-16 leading-140 md:text-20">
          {t('bannerMaterial')}
        </h1>
      </div>
      <div className=" flex flex-row items-center justify-end">
        {/* <div className="mr-5 text-14 font-bold md:text-20">{t('style')}</div> */}
        {types.map((e) => (
          <div
            onClick={() => {
              setType(e.key);
            }}
            key={`btn_item_` + e.key}
            className={`h-[25px] px-[13px] relative  ${type == e.key ? 'text-red chart-type-underline' : 'text-7b'} flex cursor-pointer flex-row items-center justify-center text-12 md:text-14`}
          >
            {e.name}
          </div>
        ))}
      </div>
      </div>
      
      {!source ? (
        <Loading />
      ) : (
        <>
          {source.size.map((e, i) => (
            <SvgItem data={e} key={'item_svg_' + i} />
          ))}
          <div
            onClick={() => {
              window.location.href = source.sources;
            }}
            className="m-auto mb-[100px] mt-[50px] flex h-[32px] w-3/4 cursor-pointer flex-row items-center justify-center rounded-full bg-red text-14 text-white md:h-[38px] md:w-[400px] md:text-16"
          >
            {t('allDown')}
          </div>
        </>
      )}
    </div>
  );
}

export default Material;
